:root {
  color-scheme: light;
  --theme-white: var(--mp-color-base-white);
  --theme-black: var(--mp-color-base-black);

  --theme-bg-1: var(--theme-white);
  --theme-bg-2: linear-gradient(
      var(--mp-color-light-base-5),
      var(--mp-color-light-base-5)
    ),
    var(--theme-bg-1);
  --theme-bg-3: linear-gradient(
      var(--mp-color-light-base-4),
      var(--mp-color-light-base-4)
    ),
    var(--theme-bg-1);

  --theme-on-bg-1: var(--mp-color-light-base-1);
  --theme-on-bg-2: var(--mp-color-light-base-2);
  --theme-on-bg-3: var(--mp-color-light-base-3);
  --theme-on-bg-4: var(--mp-color-light-base-4);
  --theme-on-bg-5: var(--mp-color-light-base-5);
  --theme-on-bg-6: var(--mp-color-light-base-6);

  --theme-text-primary: var(--theme-on-bg-1);
  --theme-text-secondary: var(--theme-on-bg-2);
  --theme-text-disabled: var(--theme-on-bg-3);

  --theme-color-brand: var(--mp-color-products-scada-light);
  --theme-on-brand: var(--theme-white);
  --theme-color-info: var(--mp-color-semantic-info-light);
  --theme-color-success: var(--mp-color-semantic-success-light);
  --theme-color-warning: var(--mp-color-semantic-warning-light);
  --theme-color-danger: var(--mp-color-semantic-danger-light);

  --theme-border-color: var(--mp-border-width) solid var(--theme-on-bg-4);
  --theme-outline-color: var(--theme-on-bg-1);
  --theme-outline-focus: var(--mp-outline-width) solid
    var(--theme-outline-color);
}

/* Overlay */
:root {
  --overlay-background-default: transparent;
  --overlay-background-hover: var(--theme-on-bg-5);
  --overlay-background-active: var(--theme-on-bg-4);
}

/* Button */
:root {
  --button-style-secondary-background: var(--theme-bg-1);
}

/* Switch */
:root {
  --component-switch-background: var(--theme-on-bg-3);
  --component-switch-handle-background: var(--theme-on-brand);
  --component-switch-handle-background-active: var(--theme-on-brand);
  --component-switch-checked-background: var(--theme-color-brand);
  --component-switch-box-shadow: var(--mp-shadow-1);
  --component-switch-focus-outline: var(--theme-outline-focus);
  --component-switch-focus-outline-offset: var(--mp-outline-offset);
  --component-switch-default-transition: var(--mp-cool-animation);
}

/* Divider */
:root {
  --component-divider-background-color: var(--theme-on-bg-4);
}
